<template>
  <div>
    <!--查询-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="formInline.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色权限">
        <el-input v-model="formInline.roleKey"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" >
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间查询">
        <div class="block">
          <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="chaxun">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-button type="info" plain @click="open">添加</el-button>
    <el-button type="danger" round @click="handleDel()" plain>批删</el-button>
    <el-button type="success" plain @click="excel()">导出</el-button>
    <el-upload class="upload-demo" action="http://localhost:8090/role/upload" multiple :limit="3">
      <el-button slot="trigger" size="small" type="primary" plain>导入数据</el-button>
    </el-upload>

<!--列表-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="roleId" label="角色编号"></el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="roleKey" label="角色权限"></el-table-column>
      <el-table-column prop="roleSort" label="顺序"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
              @change="handleStatusChange(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template slot-scope="scope"></template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="toUp(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="toSc(scope.row.roleId)">软删</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
        @current-change="handleCurrentChange"
        :page-size="formInline.pageSize"
        :current-page="formInline.pageNum"
        background
        layout="prev, pager, next"
        :total="total">
    </el-pagination>
<!--添加-->
    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form :model="addform">
        <el-col :span="24">
          <el-form-item label="角色ID" :label-width="formLabelWidth">
            <el-input v-model="addform.roleId" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="角色权限" label-width="formLabelWidth">
            <el-input v-model="addform.rokeKey" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="角色顺序" label-width="formLabelWidth">
            <el-input v-model="addform.status" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="上级菜单" prop="parentId">
            <el-cascader v-model="value" :options="tableData" :props="props" @change="handleChange"></el-cascader>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="addform.remark" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData:[],
      total:0,
      formInline:{
        pageNum:1,
        pageSize:3
      },
      value:[],
      menuOptions:[],
      props:{
        value:'id',
        label:'menuName',
        checkStrictly: true
      },
      dialogFormVisible:false,
      addform:{},
      formLabelWidth:'120px',
      value1:[]
    }
  },
   methods:{
        chaxun(){
          this.init()
        },
        open(){
          this.dialogFormVisible=true;
        },
        init(){
          this.formInline.min=this.value1[0];
          this.formInline.max=this.value1[1];
          this.axios.post("http://localhost:8090/role/list",this.formInline).then(res=>{
          this.tableData=res.data.data.list
          this.total = res.data.data.total
        })
        },
        handleCurrentChange(newPage){
          this.formInline.pageNum=newPage
          this.init()
        },
        excel(){
          window.location.href="http://localhost:8090/role/excel"
        },
        handleChange(value) {
          console.log(value);
          console.log(value[value.length-1])
        },
     add(){
      this.axios.post("http://localhost:8090/role/list",this.addform).then(res=>{
        this.$message.success('添加成功')
      })
     }
  },
  created() {
     this.init();
  }
}
</script>

<style scoped>

</style>